<ion-app>
  <ion-split-pane [disabled]="hiddenSplitPane">
    <ion-menu>

      <ion-header>
        <ion-toolbar color="primary">
          <ion-buttons slot="start">
            <ion-button (click)="theCloud()">
              <ion-icon [name]="(gameService.loggedInAndConnected) ? 'cloud' : 'cloud-outline'"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title>IdleLands</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-margin-bottom">

        <ion-list *ngIf="(gameService.player$ | async) as player">
          <ion-menu-toggle auto-hide="false">
            <ion-item class="big-item" 
                      [routerDirection]="'root'"
                      [routerLink]="['/character']">
  
              <app-gendervatar slot="start" [gender]="player.gender"></app-gendervatar> 
  
              <ng-container *ngIf="gameService.choices | async as choices">
                <ion-badge class="thought-bubble" slot="start" color="secondary" *ngIf="choices?.length">{{ choices.length }}</ion-badge>
                <div class="thought-bubble-1" slot="start" *ngIf="choices?.length">&nbsp;</div>
                <div class="thought-bubble-2" slot="start" *ngIf="choices?.length">&nbsp;</div>
                <div class="thought-bubble-3" slot="start" *ngIf="choices?.length">&nbsp;</div>
              </ng-container>

              <ion-badge class="menu-bottom-left" color="secondary" *ngIf="player.$party">In Party</ion-badge>
              
              <ion-label class="ion-text-wrap">
                {{ player.name }}<span *ngIf="player.title">, the {{ player.title }}</span>
                <p>Level {{ player.level.__current }}/{{ player.level.maximum }} {{ player.profession }}</p>
                <p>{{ player.map }} / {{ player.region }}</p>
                <p>
                  <ion-icon [src]="'assets/icon/stat-gold.svg'"></ion-icon>
                  <span class="ion-padding-start">{{ player.gold | number }} Gold</span>
                </p>
              </ion-label>
  
              <circle-progress
                slot="end"
                [percent]="(player.xp.__current / player.xp.maximum) * 100"
                [radius]="20"
                [outerStrokeWidth]="4"
                [innerStrokeWidth]="0"
                [outerStrokeColor]="'#78C000'"
                [innerStrokeColor]="''"
                [showSubtitle]="false"
                [showUnits]="false"
                [animation]="false"
                [renderOnClick]="false"
                [title]="playerCircleText(player)"
                [backgroundStroke]="'#C7E596'"
                [backgroundStrokeWidth]="2"
                [backgroundPadding]="2"
                [animationDuration]="300"
              ></circle-progress>
  
            </ion-item>
          </ion-menu-toggle>

          <ion-item button *ngIf="canUpdate" (click)="doAppUpdate()" color="secondary">
            <ion-icon slot="start" name="logo-ionic"></ion-icon> Update available! Click to update.
          </ion-item>

          <ion-item button *ngIf="a2hsPrompt" (click)="a2hs()">
            <ion-icon slot="start" [src]="add"></ion-icon> Install IdleLands
          </ion-item>

          <ion-menu-toggle auto-hide="false" 
                           *ngFor="let page of appPages" 
                           [class.ion-hide]="page.hideIf && page.hideIf(player)">

            <ion-item [routerDirection]="'root'" 
                      [routerLink]="[page.url]" 
                      [queryParams]="page.queryParams">

              <ion-icon slot="start" [src]="'assets/icon/category-' + page.icon + '.svg'"></ion-icon>

              <ion-label>
                {{ page.name }} 
              </ion-label>

              <ion-badge slot="end" *ngIf="page.badge && page.badge(player)" [color]="page.badgeColor">
                {{ page.badge(player) }}
              </ion-badge>
            </ion-item>

          </ion-menu-toggle>

          <ion-item href="https://patreon.com/seiyria" target="_blank" color="tertiary"
                    *ngIf="!player.$statisticsData?.Game?.Premium?.Tier">
            <ion-icon slot="start" name="ribbon"></ion-icon> Support IdleLands on Patreon!
          </ion-item>

          <ion-item (click)="logout()" button>
            <ion-icon slot="start" [src]="'assets/icon/category-logout.svg'"></ion-icon>

            <ion-label>
              Logout
            </ion-label>
          </ion-item>
          
        </ion-list>
      </ion-content>
      
    </ion-menu>

    <ion-menu class="player-menu" side="end" #playerMenu [swipeGesture]="false" type="overlay" [class.ion-hide]="hiddenPlayerMenu">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Players ({{ gameService.players.length }})</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <div class="blank-slate" *ngIf="gameService.players.length === 0">
          No players here... that means you're offline.
        </div>
        <ion-list>
          <ion-item *ngFor="let player of gameService.players">
            <app-gendervatar slot="start" [gender]="player.gender"></app-gendervatar> 

            <ion-label>
              <h2>
                <ion-icon *ngIf="player.mutedUntil" name="mic-off"></ion-icon>
                <ion-icon *ngIf="player.modTier === 1" name="star-outline"></ion-icon>
                <ion-icon *ngIf="player.modTier === 2" name="star-half"></ion-icon>
                <ion-icon *ngIf="player.modTier === 5" name="star"></ion-icon>
                <a class="hover-link" target="_blank" [href]="gameService.globalLink(player.name)">
                  {{ player.name }}<span *ngIf="player.title">, the {{ player.title }}</span>
                </a>
              </h2>
              <p class="vertical-center">
                <ion-badge color="secondary"><span *ngIf="player.ascensionLevel">{{ player.ascensionLevel }}★</span>{{ player.level }}</ion-badge>                
                &nbsp; {{ player.profession }}
              </p>
            </ion-label>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>